<template>
  <div>
    <van-nav-bar
        title="智慧高尔夫球场"
        fixed
    />

    <div style="display: flex;align-items: center;justify-content: space-around;padding-top: 100px">
      <h3>{{ time }}</h3>
      <van-circle
          v-model:current-rate="data.temperature"
          layer-color="#ebedf0"
          color="rgb(255,171,145)"
          :rate="data.temperature"
          :speed="50"
          :stroke-width="120"
          :text="`温度${data.temperature??18}℃`"
      />
      <van-circle
          v-model:current-rate="data.humidity"
          :rate="data.humidity"
          :stroke-width="120"
          :speed="50"
          layer-color="#ebedf0"
          :text="`湿度${~~data.humidity}%`"
      />
    </div>
    <div class="con">

      <div class="bar-box">
        <div class="text">风速 {{ ~~(data.windSpeed) }}m/s</div>
        <div class="bar-line">
          <div class="bar-slide" :style="{width:(data.windSpeed / 15 * 100)+'%',background:'#1989fa'}"></div>
        </div>
      </div>
      <div class="bar-box">
        <div class="text">光照 {{ ~~(data.light) }}LUX</div>
        <div class="bar-line">
          <div class="bar-slide" :style="{width:(data.light / 1000 *  100)+'%',background:'rgb(250,200,28)'}"></div>
        </div>
      </div>

      <!--      0.4g-3.8g /kg-->
      <div class="bar-box">
        <div class="text">土壤氮含量 {{ (data.nitrogen) }}g/kg</div>
        <div class="bar-line">
          <div class="bar-slide" :style="{width:(data.nitrogen/5 *100)+'%',background:'#07c160'}"></div>
        </div>
      </div>


      <div class="bar-box">
        <div class="text">喷水装置运行状态：{{ data.switch ? '开启' : '关闭' }}</div>
      </div>
      <div class="bar-box" style="display: flex;align-items: center">
        <span style="margin-right: 20px">喷水装置开关</span>
        <van-switch :model-value="data.switch" active-color="#ee0a24" inactive-color="#dcdee0"
                    @update:model-value="onSwitch"/>
      </div>

      <div class="bar-box">
        <div> 自动喷水阈值设定</div>
        <div style="margin-top: 30px">
          最高温度：{{ maxTemperature }}℃
        </div>
        <div style="margin-top: 20px">
          <van-slider v-model="maxTemperature" :min="-10" :max="50"/>
        </div>
        <div style="margin-top: 30px">
          最低湿度：{{ minHumidity }}%RH
        </div>
        <div style="margin-top: 20px">
          <van-slider v-model="minHumidity" :min="0" :max="100"/>
        </div>
        <div class="btn-outer">
          <van-button icon="sign" type="primary" block @click="apply">应用阈值</van-button>

          <van-button style="margin-top: 16px" icon="exit" type="danger" block @click="loginout">退出登录</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import dayjs from 'dayjs'
import {computed, onBeforeUnmount, onMounted, ref} from 'vue'
import {showToast, showConfirmDialog} from "vant";
import {getModel, set, setSwitch} from '@/api'
import {useRouter} from "vue-router";
const router = useRouter()
const maxTemperature = ref(0)
const minHumidity = ref(0)
const rate = ref(0)
const data = ref({
  temperature: '10',
  humidity: '20',
  windSpeed: '3',
  light: '100',
  nitrogen: '3.2',
  switch: '1',
  maxTemperature: '50',
  minHumidity: '10'
})



const time = ref(dayjs(new Date()).subtract(1, 'day').format('YYYY-MM-DD'))
const getData = () => {
  return getModel().then(res => {
    Object.keys(res.data).forEach(key => {

      if(key === 'temperature' || key === 'humidity'){
        data.value[key] = res.data[key] + ''

        return
      }
      data.value[key] = res.data[key]
    })
    data.value.switch = data.value.switch == '1'
  })
}


const onSwitch = (n) => {
  showConfirmDialog({
    title: '操作提示',
    message: '是否切换开关？',
  }).then(() => {
    setSwitch({switch: n ? '1' : '0'}).then(res => {
      showToast({
        type: 'success',
        message: `喷水装置已${n ? '开启' : '关闭'}！`
      })
      getData()
    })
    // checked.value = newValue;
  });
}

const apply = () => {
  showConfirmDialog({
    title: '操作确认',
    message: '超出设定阈值喷水装置将自动开启',
  }).then(res => {
    set({maxTemperature: maxTemperature.value, minHumidity: minHumidity.value}).then(res => {
      showToast({
        type: 'success',
        message: '设定成功'
      })
    })
  })
}

const loginout = () => {
  localStorage.clear()
  router.push('/login')
}
onMounted(() => {
  getData().then(() => {
    maxTemperature.value = data.value.maxTemperature
    minHumidity.value = data.value.minHumidity
  })
})
let timer = setInterval(()=>{
  getData()
},1000)

onBeforeUnmount(()=>{
  timer&&clearInterval(timer)
})
</script>

<style scoped lang="less">
.con {
  padding: 0 15px;
}

.text {
  margin-bottom: 10px;
}

.bar-box {
  margin-top: 30px;
}

.bar-line {
  width: 100%;
  background: #ebedf0;
  height: 20px;
  border-radius: 8px;

  .bar-slide {
    height: 20px;
    border-radius: 8px;
    transition: 1s linear
  }
}

.btn-outer {

  padding: 40px 0 80px 0;
}
</style>